<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow">
        <a-form size="small" :model="pageData" layout="inline">
          <a-form-item label="设备类型">
            <a-input allow-clear :style="{ width: '200px' }" class="bacClass" placeholder="" v-model="dropDownData"
              @press-enter="huiche" />
          </a-form-item>
        </a-form>
        <div>
          <Toolbar :items="['查询', '新增', '删除']" @add="addHandler" @del="deleteHandler" @select="selectHandler">
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true" default-active-key="1">
        <a-tab-pane key="1" title="保养类型列表"> -->
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
          :suppressDragLeaveHidesColumns="true" rowSelection="multiple" @grid-ready="gridReady" style="height:calc(100% - 45px)"
          :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList" :columnDefs="tc"
          :localeText="localeText1" @columnResized="onColumnResized" @columnMoved="onColumnMoved"></AgGridVuesCopys>
        <paginationCopys :page-size-options="pagingList1" :total="fySelet.total" show-total show-jumper show-page-size
          @change="PageSize" @page-size-change="change" style="justify-content: center" 
          :page-size="fySelet.size" :current="fySelet.page"/>
      </a-spin>
    </template>


    <a-drawer style="z-index: 999" ok-text="保存" cancel-text="关闭" :drawer-style="{ zIndex: 9999 }" :mask-closable="false"
      :width="400" :ok-loading="pageData.pageLoading" :visible="showAdd" unmountOnClose @ok="addOk"
      @cancel="showAdd = false">
      <template #title>
        {{ sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" :model="dataForm">
          <a-form-item label-col-flex="80px" label="类型名称" field="machineTypeIdAndName"
            :rules="[{ required: true, message: '类型名称必填' }]" :validate-trigger="['change', 'blur']">
            <a-select popup-container="html" :style="{ width: '250px' }" class="bacClass"
              v-model="dataForm.machineTypeIdAndName" @click="byTypeClick" allow-clear allow-search>
              <a-option v-for="item in byTypeList" :value="item.id + '-' + item.typeName">{{ item.typeName }}</a-option>
            </a-select>
          </a-form-item>
          <a-form-item label-col-flex="80px" label="保养模板" field="keepTemplateIdAndName"
            :rules="[{ required: true, message: '保养模板必填' }]" :validate-trigger="['change', 'blur']">
            <a-select popup-container="html" :style="{ width: '250px' }" class="bacClass"
              v-model="dataForm.keepTemplateIdAndName" @click="byTypeNameClick" allow-clear allow-search>
              <a-option v-for="item in byTypeNameList" :value="item.id + '-' + item.templateName">{{ item.templateName
              }}</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script setup lang="ts">
import { post, get } from '@/api/http'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'

import { Message, Modal } from '@arco-design/web-vue'
import { localeText } from '@/api/aggridZw'
import { pagingList } from "@/api/paging";
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
const headerShow = ref(true)

const pageData: any = reactive({
  dropDownData: '',
  showAdd: false,
  sideTitle: '',
  pageLoading: false,
})

const { dropDownData, showAdd, sideTitle } = toRefs(pageData)

const dataForm: any = reactive({
  id: null,
  "machineTypeId": null,
  "machineTypeName": "",
  "machineTypeIdAndName": "",
  "keepTemplateName": "",
  "keepTemplateId": null,
  "keepTemplateIdAndName": ''
})

onMounted(() => {
  selectList()
})

function selectList() {
  pageData.pageLoading = true
  updateGridState01()
  post({
    url: 'temRepair/MachineTypeTemplate/infoMachineTypeTemplatePage',
    data: {
      page: fySelet.page,
      limit: fySelet.size,
      "machineTypeName": pageData.dropDownData,
    }
  }).then((res: any) => {
    gridOption.value.setRowData(res.data.list)
    fySelet.total = res.data.total
  }).catch(console.log).finally(() => {
    pageData.pageLoading = false
  })
}

const huiche = () => {
  selectList()
}

const selectHandler = () => {
  fySelet.page = 1
  selectList()
}


const addHandler = () => {
  for (let i in dataForm) {
    dataForm[i] = ''
  }
  pageData.sideTitle = '新增设备类型保养模板'
  pageData.showAdd = true
}

const deleteHandler = () => {
  if (gridOption.value.getSelectedRows().length === 0) {
    return false
  }
  Modal.confirm({
    title: '系统提示',
    content: '确认删除选中的数据?',
    onOk() {
      post({
        url: 'temRepair/MachineTypeTemplate/deleteMachineTypeTemplate',
        data: gridOption.value.getSelectedRows().map((o: any) => {
          return o.id
        })
      }).then(({ code, data }: any) => {
        if (code === 200) {
          Message.success({
            content: '删除成功',
            duration: 5000
          })
          fySelet.page = 1
          selectList()

        } else {
          Message.error({
            content: '删除失败',
            duration: 5000
          })
        }

      })
    }
  })
}



const tableDataList: any = ref([])
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
  colState.value = params.columnApi
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
  flex: 1
}

const fySelet: any = reactive({
  total: 10,
  size: 10,
  page: 1
})


const PageSize = (val: any) => {
  fySelet.page = val
  selectList()
}

const change = (val: any) => {
  fySelet.size = val
  selectList()
}

const tc = [
  {
    showRowGroup: 'hide_def',
    "headerName": "",
    "checkboxSelection": true,
    "headerCheckboxSelection": true,
    "pinned": "left",
    "width": 50,
    resizable: false,
    filter: false,
    sortable: false,
    minWidth: 50,
    maxWidth: 50,
    lockPosition: "left",
  },
  {
    headerName: '序号',
    field: 'id',
    // pinned: o['fixed'],
    width: 150
  },
  {
    headerName: '机台类型',
    field: 'machineTypeName',
    width: 150
  },
  {
    headerName: '保养模板',
    field: 'keepTemplateName',
    width: 150
  },
  {
    headerName: '创建人',
    field: 'createName',
    width: 150
  },
  {
    headerName: '创建时间',
    field: 'createTime',
    width: 150
  },
  {
    headerName: '最后修改人',
    field: 'updateName',
    width: 150
  },
  {
    headerName: '最后修改时间',
    field: 'updateTime',
    width: 150
  },
  {
    headerName: '操作',
    field: 'slot',
    pinned: 'right',
    width: 120,
    cellRenderer: {
      template: `
          <a-space>
              <a-tag class="tagCss" @click="a">修 改</a-tag>
          </a-space>
          `,
      setup(props: any) {
        const a = () => {
          updateList(props.params.data)// props.params.data
        }
        return {
          a,
        }
      }
    }
  },
]

const formRef: any = ref()

const addOk = () => {
  if (pageData.sideTitle == '新增设备类型保养模板') {
    formRef.value?.validate().then((err: any) => {
      if (!err) {
        post({
          url: 'temRepair/MachineTypeTemplate/saveMachineTypeTemplate',
          data: [{
            "machineTypeId": Number(dataForm.machineTypeIdAndName.split('-')[0]),
            "machineTypeName": dataForm.machineTypeIdAndName.split('-')[1],
            "keepTemplateName": dataForm.keepTemplateIdAndName.split('-')[1],
            "keepTemplateId": Number(dataForm.keepTemplateIdAndName.split('-')[0]),
          }]
        }).then((res: any) => {
          if (res.code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            selectList()
          } else {
            Message.error(res.message)
          }
        })
      }
    })
  } else {
    formRef.value?.validate().then((err: any) => {
      if (!err) {
        post({
          url: 'temRepair/MachineTypeTemplate/updateMachineTypeTemplate',
          data: [
            {
              id: dataForm.id,
              "machineTypeId": Number(dataForm.machineTypeIdAndName.split('-')[0]),
              "machineTypeName": dataForm.machineTypeIdAndName.split('-')[1],
              "keepTemplateName": dataForm.keepTemplateIdAndName.split('-')[1],
              "keepTemplateId": Number(dataForm.keepTemplateIdAndName.split('-')[0]),
            }
          ]
        }).then((res: any) => {
          if (res.code == 200) {
            Message.success('成功')
            pageData.showAdd = false
            selectList()
          } else {
            Message.error(res.message)
          }
        })
      }
    })
  }
}

const updateList = (e: any) => {
  for (let i in e) {
    dataForm[i] = e[i]
  }
  byTypeNameClick()
  byTypeClick()
  dataForm.machineTypeIdAndName = dataForm.machineTypeId + '-' + dataForm.machineTypeName
  dataForm.keepTemplateIdAndName = dataForm.keepTemplateId + '-' + dataForm.keepTemplateName
  pageData.sideTitle = '修改设备类型保养模板'
  pageData.showAdd = true
}

const byTypeNameList: any = ref([])

const byTypeNameClick = () => {
  post({
    url: 'temRepair/upkeepTemplate/selectUpkeepTemplate',
  }).then((res: any) => {
    if (res.code == 200) {
      byTypeNameList.value = res.data.list

    } else {
      Message.error(res.message)
    }
  })
}

const byTypeList: any = ref([])

const byTypeClick = () => {
  post({
    url: 'aps/dwMachineType/getFieldValue',
    data: {
      typeName: ''
    }
  }).then((res: any) => {
    if (res.code == 200) {
      byTypeList.value = res.data

    } else {
      Message.error(res.message)
    }
  })
}

const localeText1: any = ref(localeText)
const pagingList1: any = ref(pagingList)
const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('TimeSetting002', gridOption, colState, tc)
const onColumnMoved = () => {
  saveGridState01()
}
const onColumnResized = () => {
  saveGridState01()
}
</script>
<style scoped lang="less">
:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}
</style>